<script>
export default {
  name: "DetailPanel",
  data() {
    return {
      ifShow:false,
      currentNode:{},
      currentType:'',
      relationshipTypes:['ACTED_IN','PRODUCED','DIRECTED','WROTE','REVIEWED'],
      urls:['actedby','produced','directed','wrote','reviewed'],
    }
  },
  methods:{
    onSubmit(){
      var _this = this
      if(this.currentType === ""){
        this.$message.error('未选择任何类型');
        return
      }else {
        console.log('发送请求:', `/query/${this.currentType}/${this.currentNode.name}`);
        this.$axios.get(`/query/${this.currentType}/${this.currentNode.name}`)
            .then(function (response) {
              console.log('接收到的原始数据:', response.data);
              if(response.status === 200){
                // 构造正确的数据格式
                const graphData = {
                  nodes: response.data,
                  links: []  // 关系将在 HelloWorld 组件中创建
                };
                console.log('构造的图数据:', graphData);
                console.log('当前节点:', _this.currentNode);
                console.log('当前关系类型:', _this.currentType);
                _this.$emit('update', graphData, _this.currentNode, _this.currentType)
              }
            })
            .catch((error) => {
              console.error('查询失败:', (error.response && error.response.data) || error.message);
              _this.$message.error('查询失败，请稍后重试');
            })
      }
    }
  }
}
</script>
<template>
  <el-card class="box-card detail-panel" shadow="hover">
    <div slot="header" class="clearfix">
      <span>节点信息</span>
    </div>
    <div class="text item">
      <div v-for="(v,k) in currentNode" class="detail-info">{{k}}:{{v}}</div>
      <el-form ref="form" v-show="ifShow" @submit.native.prevent="onSubmit">
        <el-form-item>
          <el-select v-model="currentType" placeholder="请选择查询关系">
            <el-option v-for="(type,i) in relationshipTypes" :label="type" :value="urls[i]" :key="type"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit">查询关系</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>


<style scoped>
.detail-panel {
  position: fixed;
  right: 20px;
  top: 60px;
  width: 320px;
  z-index: 1000;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.detail-panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.detail-panel .el-card__header {
  padding: 16px 20px;
  background-color: #f8fafc;
  border-bottom: 1px solid #edf2f7;
  font-size: 16px;
  font-weight: 600;
  color: #2d3748;
}

.detail-info {
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #4a5568;
}

.detail-info div {
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
}

.detail-info div:last-child {
  margin-bottom: 0;
}

.detail-info div span {
  font-weight: 500;
  color: #2d3748;
  margin-right: 8px;
  min-width: 80px;
}

.el-form {
  padding: 16px 20px;
  border-top: 1px solid #edf2f7;
  background-color: #f8fafc;
}

.el-form-item {
  margin-bottom: 16px;
}

.el-form-item:last-child {
  margin-bottom: 0;
}

.el-select {
  width: 100%;
}

:deep(.el-input__inner) {
  height: 36px;
  line-height: 36px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  transition: all 0.3s ease;
  font-size: 14px;
  color: #4a5568;
  padding: 0 12px;
}

:deep(.el-input__inner:hover) {
  border-color: #409EFF;
  background-color: #ffffff;
}

:deep(.el-input__inner:focus) {
  border-color: #409EFF;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
  background-color: #ffffff;
}

:deep(.el-select-dropdown__item) {
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  height: auto;
  display: flex;
  align-items: center;
  color: #4a5568;
}

:deep(.el-select-dropdown__item.selected) {
  color: #409EFF;
  font-weight: 500;
  background-color: #ebf5ff;
}

:deep(.el-select-dropdown__item:hover) {
  background-color: #f7fafc;
}

:deep(.el-select__caret) {
  color: #a0aec0;
  transition: transform 0.3s ease;
}

:deep(.el-select:hover .el-select__caret) {
  color: #409EFF;
}

:deep(.el-select.is-focus .el-select__caret) {
  transform: rotate(180deg);
}

:deep(.el-select-dropdown) {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
  min-width: 120px !important;
  margin-top: 4px;
}

:deep(.el-select-dropdown__wrap) {
  max-height: 274px;
}

:deep(.el-select-dropdown__list) {
  padding: 4px 0;
}

.el-button {
  width: 100%;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  font-weight: 500;
  padding: 0 20px;
  background-color: #409EFF;
  border-color: #409EFF;
  color: #ffffff;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.el-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.el-button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .detail-panel {
    position: fixed;
    right: 0;
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    border-radius: 12px 12px 0 0;
    transform: translateY(0);
  }

  .detail-panel:hover {
    transform: translateY(0);
  }
}
</style>